<template>
  <div class="modal">
    <div class="mask" @click="loginStore.changeShowLogin"></div>
    <div class="loginBox">
      <div class="close" @click="loginStore.changeShowLogin"></div>
      <!-- 切换登录 -->
      <section class="nav">
        <a
          href="#"
          :class="{ active: isShowContent }"
          @click="isShowContent = true"
          >手机号码登录</a
        >
        |
        <a href="#" :class="{ active: !isShowContent }" @click="wxLogin"
          >微信扫码登录</a
        >
      </section>
      <!-- 内容 -->
      <div class="content">
        <!-- 手机号码登录 -->
        <div class="phoneLogin" v-show="isShowContent">
          <div class="row">
            <input
              type="text"
              class="ipt"
              placeholder="请输入手机号"
              v-model="form.phone"
            />
          </div>
          <div class="row">
            <input type="text" class="ipt" placeholder="向右滑动" />
          </div>
          <div class="row">
            <input
              type="text"
              class="ipt"
              v-model="form.verifyCode"
              placeholder="请输入短信验证码"
            />
            <button class="btn btnCode">
              <span v-show="!isShowNum" @click="getNum">获取验证码</span>
              <span v-show="isShowNum">{{ count }} </span>
            </button>
          </div>
          <div class="row">
            <button class="btn btnLogin" @click="btnLogin">登录</button>
          </div>
        </div>
        <!-- 微信二维码登录 -->
        <div class="qrLogin" id="weixin" v-show="!isShowContent">
          微信二维码登录
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
declare let WxLogin: any;
</script>
<script lang="ts" setup>
import { reactive, toRefs, ref, watch } from "vue";
import { useLoginStore } from "@/stores/login";
import { useUserStore } from "@/stores/user";
import { ElMessage } from "element-plus";
import { validateTelephoneNumber } from "@/utils/index";
import {
  loginApi,
  phoneReginApi,
  userProfilesApi,
  weChatBindingApi,
  weChatUsersApi,
} from "./Api";
import { useRoute } from "vue-router";
import router from "@/router";
const loginStore = useLoginStore();
const useStore = useUserStore();
const isShowContent = ref(true);
const isShowNum = ref(false);
const count = ref(5);
const form = reactive({
  //手机号
  phone: "1530000",
  // phone: "15300001228",
  verifyCode: "1",
  uuid: "",
});
const route = useRoute();
//微信登录
const wxLogin = () => {
  isShowContent.value = false;
  //获取二维码 并展示
  // 申请微信登录二维码
  new WxLogin({
    id: "weixin",
    appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
    scope: "snsapi_login",
    // 扫码成功后重定向的接口
    redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
    // state填写编码后的url
    state: encodeURIComponent(
      window.btoa("http://127.0.0.1:5173" + route.path)
    ),
    // 调用样式文件
    href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLC5pbXBvd2VyQm94IC5pbmZvew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9ICAgIA0KLmltcG93ZXJCb3ggcXJjb2Rlew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9",
  });
};
//监听code
watch(
  () => route.query,
  () => {
    let code = route.query.code as string;
    if (code) {
      // 绑定微信
      weChatUsersApi(code).then((res) => {
        console.log(res);

        if (res.code == 400) {
          //二维码失效，请重新扫码登录
          ElMessage.error("二维码失效，请重新扫码登录");
          //显示扫码登录
        } else if (res.code == 407) {
          //未绑定手机号
          //先手机号登录
        } else if (res.code == 0) {
          //隐藏登录框
          loginFn();
        }
        router.push("/login");
      });
      //请求扫码登录
      // weChatUsersApi(code).then((res) => {
      //   if (res.code == 401) {
      //     console.log("二维码失效");
      //   } else if (res.code == 400) {
      //     console.log("登录失败");
      //   } else if (res.code == 0) {
      //     console.log("登录成功");
      //   }
      // });
    }
  }
);
const testS = () => {
  //1.校验手机号
  // validateTelephoneNumber()
  //  let rule=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

  if (!form.phone.trim()) {
    ElMessage.warning("请输入手机号");
    return;
  } else if (!validateTelephoneNumber(form.phone)) {
    ElMessage.error("手机号校验失败");
    return;
  }
  return true;
};
//登录
const btnLogin = () => {
  if (!testS()) return;
  loginFn();
};
//封装登录
const loginFn = () => {
  //请求登录
  phoneReginApi(form).then((res) => {
    if (res.code == 0) {
      ElMessage.success("登录成功");
      //存token
      localStorage.setItem("token", res["x-auth-token"]);
      //存仓库
      useStore.changeToken(res["x-auth-token"]);
      //隐藏登录框
      loginStore.changeShowLogin();
      //获取用户信息

      userProfilesApi().then((res) => {
        if (res.code == 0) {
          console.log(res.data);
          //存取用户信息 到仓库 显示到TopBBar
          const userStore = useUserStore();
          userStore.userObject = res.data;
          //显示用户信息
          // userStore.changeShowLogin()
          //重新加载taBBAr
          //key 监听
          const loginStore = useLoginStore();
          loginStore.ReMountedLogin();
        }
      });
    }
  });
};
//获取验证码
let time: any = null;
const getNum = () => {
  //发送验证码
  if (testS()) {
    isShowNum.value = true;
    loginApi(form.phone).then((res) => {
      if (res.code == 0) {
        ElMessage.success("验证码发送成功");
        console.log(res.data);
      } else {
        // ElMessage.error(res.message);
      }
    });
  }

  clearInterval(time);
  time = setInterval(() => {
    count.value--;
    if (count.value == 0) {
      isShowNum.value = false;
      count.value = 5;
    }
  }, 1000);
};
</script>
<style lang="less" scoped>
.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .loginBox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 555px;
    height: 423px;
    background: url("../assets/img/login-box-bg.png");
    //切换登录
    .nav {
      display: flex;
      justify-content: center;
      font-size: 20px;
      padding-top: 50px;
      a {
        padding: 0 10px;
        color: #999;
        text-decoration: none;
        &.active {
          color: rgb(10, 50, 142);
        }
      }
    }
    .content {
      width: 355px;
      margin: 20px auto 0;
      height: 200px;
      .phoneLogin {
        .row {
          display: flex;
          margin-bottom: 20px;
        }
        .ipt {
          box-shadow: 0;
          flex: 1;
          height: 48px;
        }
        .btn {
          color: #fff;
          background-color: #0a328e;
          border: none;
          cursor: pointer;
        }
        .btnCode {
          margin-left: 10px;
          line-height: 50px;
          width: 100px;
          text-align: center;
        }
        .btnLogin {
          width: 100%;
          height: 50px;
          line-height: 50px;
        }
      }
      .content {
        width: 355px;
        margin: 20px auto 0;
        height: 200px;
      }
    }
    .close {
      position: absolute;
      right: 60px;
      top: 16px;
      height: 22px;
      width: 22px;
      background: url("../assets/img/close.png");
    }
  }
}
//微信样式
#weixin {
  /* background-color: #fcf; */
  display: flex;
  justify-content: center;
  margin-top: -20px;
}
</style>
